import React from 'react'
import EchartsForReact from 'echarts-for-react'
// 加载主题文件信息的对象
import theme from '../../../style/theme/echarts-theme'

const MonitorChart2 = props => {

    function getOption() {
        let option = {
            title: {
                text: "服务运行状况统计",
                textStyle: {
                    fontSize: '15'
                },
                left: 5,
                top: 5
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            toolbox: {
                right: "10",
                feature: {
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                orient: 'vertical',
                right: 20,
                bottom: 120
            },
            series: [
                {
                    name: '服务运行状况统计',
                    type: 'pie',
                    radius: ['30%', '45%'],
                    center: ["45%", "35%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '15',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 335, name: '未运行'},
                        {value: 310, name: '批处理'},
                        {value: 310, name: '流处理'},
                        {value: 30, name: '运行失败'}
                    ]
                }
            ]
        }
        return option
    }

    return (
        <div>
            <EchartsForReact 
                option={getOption()}
                theme={theme}
            />
        </div>
    )
}

export default MonitorChart2